<template>
    <div class="person-inf">
        <div class="item-content">
            <img style="width: 100%;" src="/images/bg.jpg">
        </div>
        <div class="item-input">
            <van-cell-group>
                <van-field
                        v-model="personInf.name"
                        required
                        clearable
                        label="姓名"
                        placeholder="请输入您的姓名"
                />

                <van-field
                        v-model="personInf.mobile"
                        required
                        center
                        clearable
                        label="手机号码"
                        disabled
                        placeholder="请输入您的手机号码"
                >
                    <van-button style="border-radius: 0.5em;" class="main-theme-color" slot="button" size="small" @click="changePhone(personInf.mobile)">修改</van-button>
                </van-field>

                <van-field
                        v-model="personInf.username"
                        clearable
                        label="昵称"
                        placeholder="请输入您的昵称"
                />

                <van-field
                        v-model="personInf.sex"
                        clearable
                        label="性别"
                        placeholder="请选择"
                        :readonly="true"
                        @focus="sexSelect();"
                />

                <van-field
                        v-model="personInf.birthday"
                        clearable
                        label="生日"
                        placeholder="请输入您的出生年月"
                        :readonly="true"
                        @focus="dateSelect();"
                />

                <van-field
                        v-model="personInf.area"
                        clearable
                        label="家庭地址"
                        placeholder="请输入您的家庭地址"
                        :readonly="true"
                        @focus="areaSelect();"
                />

                <van-field
                        v-model="personInf.adress"
                        clearable
                        label="详细地址"
                        placeholder="请输入您的详细地址"
                />

            </van-cell-group>
            <br/>
            <van-row type="flex" justify="center" gutter="20">
                <van-col span="12">
                    <van-button size="large" class="save-button" style="background-color: #f6383a;" @click="goToView('/account')">返回</van-button>
                </van-col>
                <van-col span="12">
                    <van-button size="large" class="save-button" style="background-color: #76DCE1;" @click="personInfSave">保存</van-button>
                </van-col>
            </van-row>
        </div>
        <van-popup v-model="sexShow" position="bottom" :overlay="false">
            <van-picker
                    show-toolbar
                    title="请选择"
                    :columns="sexBox"
                    @cancel="onCancelSex"
                    @confirm="onConfirmSex"
            />
        </van-popup>
        <van-popup v-model="dateShow" position="bottom" :overlay="false">
            <van-datetime-picker
                    v-model="currentDate"
                    type="date"
                    :min-date="minDate"
                    @cancel="onCancelDate"
                    @confirm="onConfirmDate"
            />
        </van-popup>
        <van-popup v-model="areaShow" position="bottom" :overlay="false">
            <van-area
                    :area-list="areaList"
                    title="请选择"
                    value="440600"
                    @cancel="onCancelArea"
                    @confirm="onConfirmArea"
            />
        </van-popup>
    </div>
</template>

<script>
    import { Picker,Popup,Toast,DatetimePicker,Area, Row, Col,Dialog} from 'vant';
    import Dial from "../game/Dial";
    import dayjs from 'dayjs';
    import city from '@/assets/json/city.js'
    import Cookies from 'js-cookie'
    export default {
        name: "PersonInf",
        data () {
            return {
                personInf: {
                    name: '',
                    mobile: '',
                    username: '',
                    sex: '',
                    birthday: '',
                    area: '',
                    adress: '',
                },
                sms:'',
                sexShow:false,
                sexBox: ['未知','男', '女'],
                dateShow:false,
                currentDate: new Date(1990, 0 ,1),
                minDate: new Date(1900, 1, 1),
                areaShow:false,
                areaList:city,
                token:''
            }
        },
        components: {Dial},
        mounted(){
            this.token = Cookies.get("token")
            this.$api.personInf.personInfo({openid:this.token}).then(res=>{
                if(res.code==0){
                    var data = JSON.parse(res.data)
                    var success = data.success
                    if(!success) {
                        Toast('获取数据失败！')
                        return
                    }
                    this.personInf = data
                }
            }).catch(err=>{
                console.log(err)
            })
        },
        methods:{
            /*性别方法*/
            sexSelect(){
                this.sexShow = !this.sexShow
            },
            onConfirmSex(value, index) {
                this.personInf.sex = value
                this.sexShow = !this.sexShow
            },
            onCancelSex() {
                this.sexShow = !this.sexShow
            },
            /*日期方法*/
            dateSelect(){
                this.dateShow = !this.dateShow
            },
            onConfirmDate(value) {
                this.personInf.birthday = dayjs(value).format('YYYY-MM-DD')
                this.dateShow = !this.dateShow
            },
            onCancelDate() {
                this.dateShow = !this.dateShow
            },
            /*区域方法*/
            areaSelect(){
                this.areaShow = !this.areaShow
            },
            onConfirmArea(value) {
                this.personInf.area = value[0].name + value[1].name + value[2].name
                this.areaShow = !this.areaShow
            },
            onCancelArea() {
                this.areaShow = !this.areaShow
            },
            /*保存*/
            personInfSave() {
                if (this.personInf.name == null || this.personInf.name == "") {
                    Toast("姓名不能为空")
                    return false
                }

                var phone_pattern = /^0?(1[0-9])[0-9]{9}$/
                if (this.personInf.mobile == null || !phone_pattern.test(this.personInf.mobile) || this.personInf.mobile == "") {
                    Toast("请输入正确的手机号码，例如：13500000000")
                    return false
                }

                this.$api.personInf.personInfoUpdate({openid:this.token,username: this.personInf.username,name: this.personInf.name,
                                                      mobile: this.personInf.mobile,sex: this.personInf.sex,area: this.personInf.area,
                                                      adress: this.personInf.adress,birthday: this.personInf.birthday}).then(res=>{
                    if(res.code==0){
                        var data = JSON.parse(res.data)
                        var success = data.success
                        if(success) {
                            Toast('保存成功！')
                            this.$router.push('/account')
                        }else{
                            var msg = data.msg
                            Toast("数据保存失败！")
                        }
                    }
                }).catch(err=>{
                    console.log(err)
                })
            },
            goToView(path){
                this.$router.push(path)
            },
            changePhone(oldMobile){
                this.$router.push({path:'/changePhone',query:{oldMobile:oldMobile}})
            }
        }
    }
</script>

<style lang="less" scoped>
    @import "../../assets/less/base";
.item-content{

}
.main-theme-color {
    background-color: @main-theme-color;
    color: #FFFFFF;
}
.item-input{
    margin: 0.75rem;
}

.save-button{
    line-height: 2.4rem;
    color: #fff;
    font-size: .85rem;
    height: 2.4rem;
    border: none;
    text-decoration: none;
    text-align: center;
    display: block;
    border-radius: 0.25rem;
    box-sizing: border-box;
    -webkit-appearance: none;
    padding: 0 .5rem;
    margin: 0;
    white-space: nowrap;
    position: relative;
    text-overflow: ellipsis;
    font-family: inherit;
    cursor: pointer;
}
.van-field__control:disabled {
    opacity: 1;
    color: #000000;
    background-color: transparent;
}
</style>
